// 服务器端入口文件
import { createApp } from '../main'
import { renderToString } from 'vue/server-renderer'

// teleport的渲染方法
// 会将teleports中的内容渲染成一个字符串返回
function renderTeleports(teleports) {
  if (!teleports) return ''
  return Object.entries(teleports).reduce((all, [key, value]) => {
    if (key.startsWith('#el-popper-container-')) {
      return `${all}<div id="${key.slice(1)}">${value}</div>`
    }
    return all
  }, teleports.body || '')
}

/**
 *
 * @param {*} url 用户请求的url
 * 根据不同的url，返回不同的首屏内容
 */
export async function render(url) {
  const { app, router } = createApp()

  // 根据用户请求的url，跳转到对应的路由
  router.push(url)

  // 等待路由跳转完成
  await router.isReady()

  // 这个就是一个上下文对象，用于传递信息
  const ctx = {}
  // 目前为止，说明咱们的应用已经跳转到了对应的页面
  // 接下来需要对这个页面进行服务器端渲染，渲染为字符串
  const html = await renderToString(app, ctx)
  // 除了渲染Vue应用，还需要渲染teleport的内容
  const teleportsStr = renderTeleports(ctx.teleports)
  return [html, teleportsStr]
}
